React useSyncExternalStore: Padroneggiare l'Integrazione dello Stato Esterno

L'hook useSyncExternalStore di React, introdotto in React 18, fornisce un modo potente ed efficiente per integrare sorgenti dati esterne e librerie di gestione dello stato nei tuoi componenti React. Questo hook consente ai componenti di sottoscrivere le modifiche negli store esterni, assicurando che l'interfaccia utente rifletta sempre i dati più recenti ottimizzando al contempo le prestazioni. Questa guida offre una panoramica completa di useSyncExternalStore, coprendo i suoi concetti fondamentali, i modelli di utilizzo e le best practice.

Comprendere la Necessità di useSyncExternalStore

In molte applicazioni React, ti imbatterai in scenari in cui lo stato deve essere gestito al di fuori dell'albero dei componenti. Questo accade spesso quando si ha a che fare con:

• Librerie di terze parti: Integrazione con librerie che gestiscono il proprio stato (ad es. una connessione a un database, un'API del browser o un motore fisico).
• Stato condiviso tra componenti: Gestione dello stato che deve essere condiviso tra componenti non direttamente correlati (ad es. stato di autenticazione dell'utente, impostazioni dell'applicazione o un bus di eventi globale).
• Sorgenti dati esterne: Recupero e visualizzazione di dati da API o database esterni.

Le soluzioni tradizionali di gestione dello stato come useState e useReducer sono adatte per gestire lo stato locale dei componenti. Tuttavia, non sono progettate per gestire efficacemente lo stato esterno. Usarle direttamente con sorgenti dati esterne può portare a problemi di prestazioni, aggiornamenti incoerenti e codice complesso.

useSyncExternalStore affronta queste sfide fornendo un modo standardizzato e ottimizzato per sottoscrivere le modifiche negli store esterni. Assicura che i componenti vengano ri-renderizzati solo quando i dati rilevanti cambiano, minimizzando gli aggiornamenti non necessari e migliorando le prestazioni complessive.

Concetti Fondamentali di useSyncExternalStore

useSyncExternalStore accetta tre argomenti:

1. subscribe: Una funzione che accetta una callback come argomento e sottoscrive lo store esterno. La callback verrà chiamata ogni volta che i dati dello store cambiano.
2. getSnapshot: Una funzione che restituisce un'istantanea (snapshot) dei dati dallo store esterno. Questa funzione dovrebbe restituire un valore stabile che React può utilizzare per determinare se i dati sono cambiati. Deve essere pura e veloce.
3. getServerSnapshot (opzionale): Una funzione che restituisce il valore iniziale dello store durante il rendering lato server. Questo è cruciale per garantire che l'HTML iniziale corrisponda al rendering lato client. Viene utilizzata SOLO in ambienti di rendering lato server. Se omessa in un ambiente lato client, viene utilizzata invece getSnapshot. È importante che questo valore non cambi mai dopo essere stato renderizzato inizialmente sul lato server.

Ecco un'analisi dettagliata di ciascun argomento:

1. subscribe

La funzione subscribe è responsabile di stabilire una connessione tra il componente React e lo store esterno. Riceve una funzione di callback, che dovrebbe chiamare ogni volta che i dati dello store cambiano. Questa callback viene tipicamente utilizzata per attivare un nuovo rendering del componente.

Esempio:

            const subscribe = (callback) => {
  store.addListener(callback);
  return () => {
    store.removeListener(callback);
  };
};
            

              
                Copy
              
            
          

In questo esempio, store.addListener aggiunge la callback all'elenco dei listener dello store. La funzione restituisce una funzione di pulizia (cleanup) che rimuove il listener quando il componente viene smontato, prevenendo perdite di memoria.

2. getSnapshot

La funzione getSnapshot è responsabile del recupero di un'istantanea dei dati dallo store esterno. Questa istantanea dovrebbe essere un valore stabile che React può utilizzare per determinare se i dati sono cambiati. React utilizza Object.is per confrontare l'istantanea corrente con quella precedente. Pertanto, deve essere veloce ed è fortemente consigliato che restituisca un valore primitivo (stringa, numero, booleano, null o undefined).

Esempio:

            const getSnapshot = () => {
  return store.getData();
};
            

              
                Copy
              
            
          

In questo esempio, store.getData restituisce i dati correnti dallo store. React confronterà questo valore con il valore precedente per determinare se il componente deve essere ri-renderizzato.

3. getServerSnapshot (Opzionale)

La funzione getServerSnapshot è rilevante solo quando si utilizza il rendering lato server (SSR). Questa funzione viene chiamata durante il rendering iniziale del server e il suo risultato viene utilizzato come valore iniziale dello store prima che avvenga l'idratazione sul client. Restituire valori coerenti è fondamentale per un SSR di successo.

Esempio:

            const getServerSnapshot = () => {
  return store.getInitialDataForServer();
};
            

              
                Copy
              
            
          

In questo esempio, `store.getInitialDataForServer` restituisce i dati iniziali appropriati per il rendering lato server.

Esempio di Utilizzo Base

Consideriamo un semplice esempio in cui abbiamo uno store esterno che gestisce un contatore. Possiamo usare useSyncExternalStore per visualizzare il valore del contatore in un componente React:

            // Store esterno
const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// Componente React
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

In questo esempio, createStore crea un semplice store esterno che gestisce il valore di un contatore. Il componente Counter utilizza useSyncExternalStore per sottoscrivere le modifiche nello store e visualizzare il conteggio corrente. Quando si fa clic sul pulsante di incremento, la funzione setState aggiorna il valore dello store, il che attiva un nuovo rendering del componente.

Integrazione con Librerie di Gestione dello Stato

useSyncExternalStore è particolarmente utile per l'integrazione con librerie di gestione dello stato come Zustand, Jotai e Recoil. Queste librerie forniscono i propri meccanismi per la gestione dello stato e useSyncExternalStore ti permette di integrarle senza problemi nei tuoi componenti React.

Ecco un esempio di integrazione con Zustand:

            import { useStore } from 'zustand';
import { create } from 'zustand';

// Store Zustand
const useBoundStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// Componente React
function Counter() {
  const count = useStore(useBoundStore, (state) => state.count);
  const increment = useStore(useBoundStore, (state) => state.increment);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Zustand semplifica la creazione dello store. Le sue implementazioni interne di subscribe e getSnapshot vengono utilizzate implicitamente quando si sottoscrive uno stato particolare.

Ecco un esempio di integrazione con Jotai:

            import { atom, useAtom } from 'jotai'

// Atom di Jotai
const countAtom = atom(0)

// Componente React
function Counter() {
  const [count, setCount] = useAtom(countAtom)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

export default Counter;

            

              
                Copy
              
            
          

Jotai utilizza gli atomi per gestire lo stato. useAtom gestisce internamente la sottoscrizione e la creazione dello snapshot.

Ottimizzazione delle Prestazioni

useSyncExternalStore fornisce diversi meccanismi per ottimizzare le prestazioni:

• Aggiornamenti Selettivi: React ri-renderizza il componente solo quando il valore restituito da getSnapshot cambia. Ciò garantisce che vengano evitati ri-rendering non necessari.
• Batching degli Aggiornamenti: React raggruppa gli aggiornamenti da più store esterni in un unico ri-rendering. Ciò riduce il numero di ri-rendering e migliora le prestazioni complessive.
• Evitare Chiusure Stale (Stale Closures): useSyncExternalStore assicura che il componente abbia sempre accesso ai dati più recenti dallo store esterno, anche quando si gestiscono aggiornamenti asincroni.

Per ottimizzare ulteriormente le prestazioni, considera le seguenti best practice:

• Minimizza la quantità di dati restituita da getSnapshot: Restituisci solo i dati effettivamente necessari al componente. Ciò riduce la quantità di dati da confrontare e migliora l'efficienza del processo di aggiornamento.
• Usa tecniche di memoizzazione: Memoizza i risultati di calcoli costosi o trasformazioni di dati. Questo può prevenire ricalcoli non necessari e migliorare le prestazioni.
• Evita sottoscrizioni non necessarie: Sottoscrivi lo store esterno solo quando il componente è effettivamente visibile. Ciò può ridurre il numero di sottoscrizioni attive e migliorare le prestazioni complessive.
• Assicurati che getSnapshot restituisca un nuovo oggetto *stabile* solo se i dati sono cambiati: Evita di creare nuovi oggetti/array/funzioni se i dati sottostanti non sono effettivamente cambiati. Restituisci lo stesso oggetto per riferimento, se possibile.

Server-Side Rendering (SSR) con useSyncExternalStore

Quando si utilizza useSyncExternalStore con il rendering lato server (SSR), è fondamentale fornire una funzione getServerSnapshot. Questa funzione assicura che l'HTML iniziale renderizzato sul server corrisponda al rendering lato client, prevenendo errori di idratazione e migliorando l'esperienza utente.

Ecco un esempio di utilizzo di getServerSnapshot:

            const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const getServerSnapshot = () => initialValue; // Importante per SSR

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    getServerSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// Componente React
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot, counterStore.getServerSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

In questo esempio, getServerSnapshot restituisce il valore iniziale del contatore. Ciò garantisce che l'HTML iniziale renderizzato sul server corrisponda al rendering lato client. getServerSnapshot dovrebbe restituire un valore stabile e prevedibile. Dovrebbe anche eseguire la stessa logica della funzione getSnapshot sul server. Evita di accedere ad API specifiche del browser o a variabili globali in getServerSnapshot.

Modelli di Utilizzo Avanzati

useSyncExternalStore può essere utilizzato in una varietà di scenari avanzati, tra cui:

• Integrazione con API del Browser: Sottoscrizione a modifiche in API del browser come localStorage o navigator.onLine.
• Creazione di Hook Personalizzati: Incapsulare la logica per la sottoscrizione a uno store esterno in un hook personalizzato.
• Utilizzo con l'API Context: Combinare useSyncExternalStore con l'API Context di React per fornire uno stato condiviso a un albero di componenti.

Diamo un'occhiata a un esempio di creazione di un hook personalizzato per la sottoscrizione a localStorage:

            import { useSyncExternalStore } from 'react';

function useLocalStorage(key, initialValue) {
  const getSnapshot = () => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("Error getting value from localStorage:", error);
      return initialValue;
    }
  };

  const subscribe = (callback) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const setItem = (value) => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
      window.dispatchEvent(new Event('storage')); // Attiva manualmente l'evento 'storage' per aggiornamenti sulla stessa pagina
    } catch (error) {
      console.error("Error setting value in localStorage:", error);
    }
  };

  const serverSnapshot = () => initialValue;

  const storedValue = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  return [storedValue, setItem];
}

export default useLocalStorage;

            

              
                Copy
              
            
          

In questo esempio, useLocalStorage è un hook personalizzato che sottoscrive le modifiche in localStorage. Utilizza useSyncExternalStore per gestire la sottoscrizione e recuperare il valore corrente da localStorage. Inoltre, invia correttamente un evento di archiviazione per garantire che gli aggiornamenti sulla stessa pagina vengano riflessi (poiché gli eventi `storage` vengono attivati solo in altre schede). serverSnapshot garantisce che i valori iniziali siano forniti correttamente negli ambienti server.

Best Practice e Trappole Comuni

Ecco alcune best practice e trappole comuni da evitare quando si utilizza useSyncExternalStore:

• Evita di mutare direttamente lo store esterno: Usa sempre l'API dello store per aggiornare i dati. Mutare direttamente lo store può portare ad aggiornamenti incoerenti e comportamenti inaspettati.
• Assicurati che getSnapshot sia pura e veloce: getSnapshot non dovrebbe avere effetti collaterali e dovrebbe restituire rapidamente un valore stabile. I calcoli costosi o le trasformazioni di dati dovrebbero essere memoizzati.
• Fornisci una funzione getServerSnapshot quando usi SSR: Questo è fondamentale per garantire che l'HTML iniziale renderizzato sul server corrisponda al rendering lato client.
• Gestisci gli errori con garbo: Usa blocchi try-catch per gestire potenziali errori durante l'accesso allo store esterno.
• Pulisci le sottoscrizioni: Annulla sempre la sottoscrizione dallo store esterno quando il componente viene smontato per prevenire perdite di memoria. La funzione subscribe dovrebbe restituire una funzione di pulizia che rimuove il listener.
• Comprendi le implicazioni sulle prestazioni: Sebbene useSyncExternalStore sia ottimizzato per le prestazioni, è importante comprendere il potenziale impatto della sottoscrizione a store esterni. Minimizza la quantità di dati restituita da getSnapshot ed evita sottoscrizioni non necessarie.
• Testa a fondo: Assicurati che l'integrazione con lo store funzioni correttamente in diversi scenari, specialmente nel rendering lato server e in modalità concorrente.

Conclusione

useSyncExternalStore è un hook potente ed efficiente per integrare sorgenti dati esterne e librerie di gestione dello stato nei tuoi componenti React. Comprendendo i suoi concetti fondamentali, i modelli di utilizzo e le best practice, puoi gestire efficacemente lo stato condiviso nelle tue applicazioni React e ottimizzare le prestazioni. Che tu stia integrando librerie di terze parti, gestendo lo stato condiviso tra componenti o recuperando dati da API esterne, useSyncExternalStore fornisce una soluzione standardizzata e affidabile. Adottalo per costruire applicazioni React più robuste, manutenibili e performanti per un pubblico globale.

Risorse Aggiuntive

• Documentazione React su useSyncExternalStore
• Pull Request di React 18 che introduce useSyncExternalStore
• Libreria di Gestione dello Stato Zustand
• Libreria di Gestione dello Stato Jotai